<template>
  <t-space direction="vertical">
    <!-- 施工阶段 -->
    <t-radio-group v-model:value="searchParams.constructionStage" variant="default-filled" @change="handleInitTable">
      <t-radio-button
        v-for="_ in [
          { label: '全部', value: '' },
          ...dictionaryStore.get('decoration_construction_order_stage', 'number'),
        ]"
        :key="_.value"
        :value="_.value"
      >
        {{ _.label }}
      </t-radio-button>
    </t-radio-group>
    <!-- 材料类型 -->
    <t-radio-group v-model:value="searchParams.jobType" variant="default-filled" @change="handleInitTable">
      <t-radio-button
        v-for="_ in [{ label: '全部', value: '' }, ...dictionaryStore.get('decoration_job_type', 'number')]"
        :key="_.value"
        :value="_.value"
      >
        {{ _.label }}
      </t-radio-button>
    </t-radio-group>
  </t-space>
  <!-- 自定义表格 -->
  <custom-table
    ref="customTableRef"
    row-key="id"
    :columns="columns"
    :api="laborCostsAnalysis"
    column-controller-key="laborCostsAnalysisList"
    expand-on-row-click
  >
    <template #constructionStage="{ row }">
      {{ dictionaryStore.analysis('decoration_construction_order_stage', row.constructionStage) }}
    </template>
    <template #jobType="{ row }">
      {{ dictionaryStore.analysis('decoration_job_type', row.jobType) }}
    </template>
    <template #houseType="{ row }">
      {{ dictionaryStore.analysis('decoration_order_house_type', row.houseType) }}
    </template>
    <template #unit="{ row }">
      {{ dictionaryStore.analysis('decoration_budget_unit', row.unit) }}
    </template>
    <template #profitMargin="{ row }">
      {{ `${((row.price / row.costPrice - 1) * 100).toFixed(2)}%` }}
    </template>
    <template #expandedRow="{ row }">
      <t-table
        row-key="id"
        :data="row.children"
        :columns="[
          { colKey: 'projectName', title: '项目名称' },
          { colKey: 'quantity', title: '数量' },
          { colKey: 'price', title: '单价(元)' },
          { colKey: 'discount', title: '折扣' },
          { colKey: 'finalPrice', title: '最终售价(元)' },
          { colKey: 'costPrice', title: '成本价(元)' },
          { colKey: 'profitMargin', title: '利润率' },
        ]"
        bordered
        size="small"
        stripe
        hover
      >
        <template #quantity="{ row: r }">
          {{ r.quantity * r.projectQuantity }}
        </template>
        <template #discount="{ row: r }"> {{ r.discount }}% </template>
        <template #finalPrice="{ row: r }">
          {{ (r.price - (r.price * r.discount) / 100).toFixed(2) }}
        </template>
        <template #profitMargin="{ row: r }">
          {{ `${(((r.price - (r.price * r.discount) / 100) / r.costPrice - 1) * 100).toFixed(2)}%` }}
        </template>
      </t-table>
    </template>
  </custom-table>
</template>

<script setup lang="ts">
import { TableCol } from 'tdesign-vue-next';
import { onMounted, reactive, useTemplateRef } from 'vue';

import { laborCostsAnalysis } from '@/api/budget/budget-components';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// props
const props = defineProps({
  // 方案id
  programmeId: {
    type: Number,
  },
  // 订单id
  orderId: {
    type: Number,
  },
});
// 搜索参数
const searchParams = reactive({
  constructionStage: '',
  jobType: '',
});
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'constructionStage', title: '施工阶段' },
  { colKey: 'jobType', title: '工种类型' },
  { colKey: 'name', title: '费用名称' },
  { colKey: 'houseType', title: '房屋户型' },
  { colKey: 'unit', title: '单位' },
  { colKey: 'quantity', title: '总数量' },
  { colKey: 'price', title: '总售价(元)' },
  { colKey: 'costPrice', title: '总成本价(元)' },
  { colKey: 'profitMargin', title: '利润率' },
];
// 处理初始化表格
const handleInitTable = () => {
  const params = {
    programmeId: props.programmeId,
    orderId: props.orderId,
    ...searchParams,
  };
  customTableRef.value.initTable(params);
};
onMounted(async () => {
  handleInitTable();
});
</script>

<style lang="less" scoped></style>
